<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大厅切换与数据页表页面</title>
    <!-- MiniUI 样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/mini-ui/3.0.0/mini-ui.min.css" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link href="../dist/output.css" rel="stylesheet">
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- MiniUI 脚本 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/mini-ui/3.0.0/mini-ui.min.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 头部区域 -->
    <header class="w-full bg-white border-b shadow-sm">
        <div class="max-w-[1280px] mx-auto flex items-center justify-between px-8 h-16">
            <!-- 左侧logo -->
            <div class="flex items-center min-w-[180px]">
                <img src="logo.png" alt="LOGO" class="h-10 w-auto">
            </div>
            <!-- 右侧切换按钮 -->
            <div class="flex items-center gap-4">
                <button class="mini-button bg-white text-gray-700 border">线上大厅</button>
                <button class="mini-button bg-blue-600 text-white">线下大厅</button>
            </div>
        </div>
    </header>
    <!-- 内容区域 -->
    <main class="max-w-[1240px] mx-auto px-6 py-6">
        <!-- 上半部分：左右两栏 -->
        <div class="flex gap-6 mb-6">
            <!-- 左侧容器（上下两个子容器） -->
            <div class="flex flex-col gap-4 w-full max-w-[820px] min-w-[320px]">
                <!-- 上子容器 -->
                <div class="bg-white rounded shadow p-4 min-h-[100px] flex items-center justify-center">
                    <!-- 可放统计信息或图表 -->
                    <span class="text-gray-600">左上子容器内容</span>
                </div>
                <!-- 下子容器 -->
                <div class="bg-white rounded shadow p-4 min-h-[100px] flex items-center justify-center">
                    <!-- 可放图表或其他内容 -->
                    <span class="text-gray-600">左下子容器内容</span>
                </div>
            </div>
            <!-- 右侧容器（四个小容器） -->
            <div class="grid grid-cols-2 grid-rows-2 gap-4 max-w-[400px] min-w-[300px] w-full">
                <!-- 小容器1 -->
                <div class="bg-white rounded shadow p-4 flex flex-col items-center justify-center">
                    <img src="icon1.png" alt="功能1" class="h-10 w-10 mb-2">
                    <span class="text-base font-medium text-gray-700">功能入口一</span>
                </div>
                <!-- 小容器2 -->
                <div class="bg-white rounded shadow p-4 flex flex-col items-center justify-center">
                    <img src="icon2.png" alt="功能2" class="h-10 w-10 mb-2">
                    <span class="text-base font-medium text-gray-700">功能入口二</span>
                </div>
                <!-- 小容器3 -->
                <div class="bg-white rounded shadow p-4 flex flex-col items-center justify-center">
                    <img src="icon3.png" alt="功能3" class="h-10 w-10 mb-2">
                    <span class="text-base font-medium text-gray-700">功能入口三</span>
                </div>
                <!-- 小容器4 -->
                <div class="bg-white rounded shadow p-4 flex flex-col items-center justify-center">
                    <img src="icon4.png" alt="功能4" class="h-10 w-10 mb-2">
                    <span class="text-base font-medium text-gray-700">功能入口四</span>
                </div>
            </div>
        </div>
        <!-- 下半部分：MiniUI 页表 -->
        <div class="bg-white rounded shadow p-4">
            <div id="miniGrid" class="mini-datagrid" style="width:100%;height:360px;"
                allowResize="true"
                allowAlternating="true"
                showPager="true"
                pageSize="8">
                <div property="columns">
                    <div field="name" width="100" headerAlign="center" align="center">姓名</div>
                    <div field="department" width="120" headerAlign="center" align="center">部门</div>
                    <div field="content" width="200" headerAlign="center" align="left">内容</div>
                    <div field="type" width="80" headerAlign="center" align="center">类型</div>
                    <div field="time" width="150" headerAlign="center" align="center">时间</div>
                    <div field="phone" width="120" headerAlign="center" align="center">联系方式</div>
                </div>
            </div>
        </div>
    </main>
    <script>
        mini.parse();
        // 模拟表格数据
        var gridData = [
            { name: "王琴", department: "科研处", content: "访问速度有点慢，卡顿", type: "财务", time: "2025年4月15日 8:30", phone: "15335579069" },
            { name: "张勇", department: "教务处", content: "访问速度有点慢，卡顿", type: "人事", time: "2025年4月15日 8:30", phone: "18233847675" },
            { name: "张学敏", department: "后勤管理处", content: "建议优化体大开放时间和机制", type: "人事", time: "2025年4月15日 8:30", phone: "13899883747" },
            { name: "范志强", department: "图书馆", content: "访问速度有点慢，卡顿", type: "财务", time: "2025年4月15日 8:30", phone: "15335579069" }
        ];
        var miniGrid = mini.get("miniGrid");
        miniGrid.setData(gridData);
    </script>
</body>
</html>
